<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
    <script>

        const router = new VueRouter({ mode: 'history' })
    </script>
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        a {
            text-decoration: none;
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #147a7e;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>


<body>

    <div id="app">


        <el-menu class="el-menu-demo" mode="horizontal" text-align="right" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1"></el-menu-item>
            <el-menu-item index="1" style="text-align:right">MyAdmin</el-menu-item>
        </el-menu>

        <el-container style="border: 1px solid #eee">
            <el-aside width="210px" style="background-color:#545c64">
                <el-menu :default-openeds="['1', '2', '3', '4']" class="el-menu-vertical-demo"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>角色信息</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/role">
                                <el-menu-item index="1-1">角色信息</el-menu-item>
                            </a>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>邮件</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/mail/role">
                                <el-menu-item index="1-1">个人邮件</el-menu-item>
                            </a>
                            <a href="/mail/server">
                                <el-menu-item index="1-1">单服邮件</el-menu-item>
                            </a>
                            <a href="/mail">
                                <el-menu-item index="1-1">全服邮件</el-menu-item>
                            </a>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>服务器配置</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/server">
                                <el-menu-item index="3-1">服务器列表</el-menu-item>
                            </a>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <a href="/notice">
                                <el-menu-item index="3-1">公告</el-menu-item>
                            </a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>在线统计</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/online/day">
                                <el-menu-item index="4-1">日在线</el-menu-item>
                            </a>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <a href="/online/month">
                                <el-menu-item index="4-1">月在线</el-menu-item>
                            </a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航5</span>
                        </template>
                        <el-menu-item index="5-1">-</el-menu-item>
                        <el-menu-item index="5-2">-</el-menu-item>
                        <el-menu-item index="5-3">-</el-menu-item>
                        <el-menu-item index="5-4">-</el-menu-item>
                        <el-menu-item index="5-5">-</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="height: 20px;">
                </el-header>